<!doctype html>
<html xmlns:th="www.thymeleaf.org">
<meta charset="utf-8">
<head th:replace="index::head"></HEAD>
<style>
.headrow {
	height: 100px;
	border: 1px solid #ddd;
	padding: 2px;
	border-radius: 2px;
	display: inline-block;
	vertical-align: middle;
}
.minhead{
	height: 24px;
	margin: 1px 9px;
	border-width: 2px;
}
.minhead:hover{
	border-color: #aaa;
	border-style: outset;
}
.selected{
	border-color: #aaa;
	border-style: inset;
}
</style>
<BODY>
	<header th:replace="index::header"></header>
	<!--      主体        -->
	<main>
		<!--      导航        -->
		<div style="padding: 3px 8px">
			<span class="layui-breadcrumb">
				<a href="/">作业论坛首页</a>
				<a>
					<cite>我的信息</cite>
				</a>
			</span>
		</div>
		<DIV class="t">
			<form class="layui-form layui-main" style="width: 500px">
				<div class="layui-form-item">
					<label class="layui-form-label">姓名：</label>
					<div class="layui-input-block">
						<input th:value="${session?.loginedUser?.name}" class="layui-input" maxlength="12" disabled="disabled" style="color: #aaa">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">账号：</label>
					<div class="layui-input-block">
						<input v-model="user.account" class="layui-input" maxlength="16">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">邮箱：</label>
					<div class="layui-input-block">
						<input v-model="user.email" class="layui-input" maxlength="50" placeholder="请填写真实邮箱地址，用于登录和找回密码">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">头像：</label>
					<div class="layui-input-block" style="color: #777;text-align: center;">
						<div style="float: left;">
						<img :src="user.head" class="headrow" id="headimg" style="cursor: pointer;"><br>
						点击头像上传图片
						</div>
						<div class="headrow" style="width:270px; float: right;">
							<img v-for="i in 15" :src="'image/head/'+i+'.gif'" class="headrow minhead"
								@click="change(i)" :class="{selected:user.head.replace(/.*?(\d+)\.gif/,'$1')==i}">
							<div >不想找图片就随便选一个吧</div>
						</div>
						
					</div>
				</div>
				<div class="layui-form-item" style="text-align: right; margin: 10px 0px">
					<button @click="save" type="button" class="layui-btn">提交</button>
					<button onclick="window.history.back();" type="button"
						class="layui-btn">返回</button>
				</div>
			</form>
		</DIV>
	</main>
	<script type="text/javascript">
		var v = new Vue({
			el:"main",
			data:{
				user:{
					id     :'[[${session?.loginedUser?.id}]]',
					name   :'[[${session?.loginedUser?.name}]]',
					clsSn  :'[[${session?.loginedUser?.clsSn}]]',
					account:'[[${session?.loginedUser?.account}]]',
					email  :'[[${session?.loginedUser?.email}]]',
					head   :'[[${session?.loginedUser?.head}]]'
				}
			},
			methods:{
				save(){
					post("user/saveInfo", usp(this.user), res=>{
						// 设值菜单条头像
						uv.user.head = this.user.head;
						alert("您的个人信息更新成功！");
					});
				},
				change(i){
					this.user.head = 'image/head/' + i + '.gif';
				}
			}
		})
		layui.element.render();
		layui.upload.render({
            elem: '#headimg'
            , url: '/upload'
            , accept: 'images'
            , field: 'file'//后台接收参数名
            , acceptMime: 'image/*'
            , auto: false
            , before: function(obj) {
                layer.load();
            }
            ,choose: function(obj){  //上传前选择回调方法
                var flag = true;
                obj.preview(function(index, file, result){
                    //console.log(file);            //file表示文件信息，result表示文件src地址
                    var img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        if(img.width <400 && img.height <400){
                            obj.upload(index, file); //满足条件调用上传方法
                        }else{
                            flag = false;
                            alert("上传图片的大小必须小于 400 * 400 像素！",null,3000,6);
                            return false;
                        }
                    }
                    return flag;
                });
            }
            , done: function (res) {
            	layer.closeAll('loading');
            	if(res.code==1){
            		alert(res.msg, null, 3000, 6);
            	}
                v.user.head = res.data.webPath;
            }
        });
	</script>
	<!-- 导入页脚 -->
	<footer th:replace="index::footer"></footer>
</BODY>
</HTML>
